<template>
    <div class="form-wrap">
        <div>

        </div>
        <div class="label" :class="{disabled: disabled}" v-if="field.label || field.message || hasLabel">
            <div :class="{required: required}">{{field.label}}</div>
            <span class="msg" v-if="field.message">{{field.message}}</span>
            <slot name="label"></slot>
        </div>
        <div class="value-wrap" :class="field.type === 'textarea' ? 'area-wrap' : ''">
            <div class="value">

                <m-field
                        v-if="!field.valueSlot"
                        :field="field"
                        :value="value"
                        :align="align"
                        :disabled="field.disabled || disabled"
                        @change="onChange"
                ></m-field>
                <slot name="value"></slot>
            </div>
            <div class="rule" :style="{'text-align': align}" v-show="showErr">
                {{errmsg}}
            </div>

        </div>
    </div>
</template>
<script>
  import field from '@/components/field/field'
  export default {
    name: "m-form",
    components: {
      "m-field": field
    },
    computed:{
      hasLabel() {
        return !!this.$slots.label;
      },
    },
    /**
     * 增加参数
     * field.valueSlot 是否提供value slot
     */
    props: {
      'field':{},
      'value':{},
      'align':{
        default: 'right'
      },
      'disabled': {}
    },
    watch: {
      ['field.rule']: {
        handler(val){
          if (val && val.some(item => item.required)) this.required = true;
        },
        immediate: true
      },
      value: {
        handler(val){
          this.showErr = false;
          this.val = val;
        },immediate: true
      }
    },
    data(){
      return {
        errmsg: '',
        showErr: false,
        val: '',
        required: false
      }
    },
    methods: {
      onChange(e){
        this.val = e.val;
        console.log('字段变化',e);
        this.valid(item => {
          if (item) this.$emit('change',e)

        })
      },
      valid(callBack){
        let {rule,label,type} = this.field,
          isValid = true,
          errmsg = '';
        if (rule) {
          for (let i = 0;i< rule.length; i++){
            let item = rule[i],
              required = type === 'checkbox' ? this.val && this.val.length : this.val;
            if (item.required && !required){
              errmsg = item.message || (label + '不能为空')
              isValid = false;
            }
            //  正则
            if (item.pattern) {
              isValid = item.pattern.test(this.val);
              errmsg = item.message || (label + '格式不正确')
            }
            // 校验函数
            if (item.validator) {
              isValid = item.validator(this.val);
              errmsg = item.message || (label + '格式不正确')
            }
            if (!isValid){
              break;
            }
          }
          this.errmsg = errmsg;
        }
        this.showErr = !isValid;
        callBack && callBack(isValid)
      }
    }
  }
</script>

<style scoped lang="less">
    .form-wrap{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        /*align-items: center;*/
        /*height: 44px;*/
        .label{
            font-size: 15px;
            padding-right: 10px;
            height: 44px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: #333;
            .msg{
                color: #b3b3b3;
                font-size: 12px;
                line-height: 16px;
            }
            &.disabled{
                color: #B3B3B3;
            }
            & > .required{
                &:before{
                    content: '*';
                    color: #ff0000;
                }
            }
        }
        .value-wrap{

            flex: 1;
            height: 100%;
            width: 0;
            padding: 7px 0;
            .value{
                min-height: 30px;
                width: 100%;
                display: flex;
                align-items: center;
            }
            .rule{
                width: 100%;
                color: #ff0000;
            }
            &.area-wrap{
                width: 100%;
                flex: unset;
            }
        }
    }

</style>
